<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/layout.css">
    <link rel="stylesheet" href="css/managementLayout.css">
    <script src="js/jquery1.12.4.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/monitor.js"></script>
    <script src="js/slider.js"></script>
    <script src="js/vue.js"></script>
    <title>后台权限管理系统</title>

</head>

<body>

    <div id="container">
        <section class="public-main">
            <div class="sidebar public-main-left">
                <ul class="sidebar-menu">
                    <!-- <li class="header">主导航</li> -->
                    <li class='sidebar-menu-header'>
                        <img src='./img/logo.png' />
                        <span>后台管理系统</span>
                    </li>
                    <li class="treeview">
                        <a href="index.html">
                            <i class="fa fa-dashboard"></i> <span>主  页</span> <i class="fa fa-angle-right pull-right"></i>
                        </a>
                    </li>
                    <li class="header">后台管理</li>
                    <li class="treeview">
                        <a href="#">
                            <i class="fa fa-dashboard"></i> <span>系统管理</span> <i class="fa fa-angle-right pull-right"></i>
                        </a>
                        <ul class="treeview-menu">
                            <li><a href="#"><i class="fa fa-circle-o"></i>用户管理</a></li>
                            <li><a href="#"><i class="fa fa-circle-o"></i>菜单管理</a></li>
                            <li><a href="#"><i class="fa fa-circle-o"></i>角色管理</a></li>
                            <li><a href="#"><i class="fa fa-circle-o"></i>权限管理</a></li>
                        </ul>
                    </li>
                    <li class="treeview">
                        <a href="#">
                            <i class="fa fa-files-o"></i>
                            <span>课程管理</span>
                            <span class="label label-primary pull-right">4</span>
                        </a>
                        <ul class="treeview-menu" style="display: none;">
                            <li><a href="managementLayout.html"><i class="fa fa-circle-o"></i> 课程列表</a></li>
                            <li><a href="#"><i class="fa fa-circle-o"></i> 分类管理</a></li>
                        </ul>
                    </li>
                    <li class="treeview">
                        <a href="#">
                            <i class="fa fa-pie-chart"></i>
                            <span>订单管理</span>
                            <i class="fa fa-angle-right pull-right"></i>
                        </a>
                        <ul class="treeview-menu">
                            <li><a href="#"><i class="fa fa-circle-o"></i> 订单详情</a></li>
                            <li><a href="#"><i class="fa fa-circle-o"></i> 支付功能</a></li>
                        </ul>
                    </li>
                    <li class="treeview">
                        <a href="#">
                            <i class="fa fa-laptop"></i>
                            <span>智能客服</span>
                            <i class="fa fa-angle-right pull-right"></i>
                        </a>
                        <ul class="treeview-menu">
                            <li><a href="#"><i class="fa fa-circle-o"></i> 客服问答</a></li>
                            <li><a href="#"><i class="fa fa-circle-o"></i> 投诉建议</a></li>
                        </ul>
                    </li>
                    <li class="header">前台管理</li>
                    <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>轮播图片</span></a></li>
                    <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>课程推荐</span></a></li>
                </ul>
            </div>
            <!-- 主体部分 -->

            <div class="public-main-right">

                <header class="nav-wrapper">
                    <div class="main-right-header">

                        <div class="location">
                            <strong>课程管理</strong>
                            <span>课程列表</span>
                        </div>

                        <div class='main-right-header-right'>

                            <span class="">
                                超级管理员：李艳卿 Chelsea
                            </span>

                            <span class="">
                            <a href="#"><img src="img/head.jpg" style="width: 25px"></a>
                        </span>
                            <span class=""><a href="login.html">退出登录</a></span>
                        </div>

                    </div>
                </header>

                <form>
                    <div class="search">
                        <span>课程名称:</span>
                        <input type="text" placeholder="需要查询的内容" />

                        <span>是否免费：</span>
                        <select name="tigong">
                            <option value="">--请选择--</option>
                            <option value="">免费</option>
                            <option value="">付费</option>
                        </select>

                        <span>上下架</span>
                        <select name="fukuan">
                            <option value="">--请选择--</option>
                            <option value="">上架</option>
                            <option value="">下架</option>
                            <option value="">审核中</option>
                        </select>

                        <input type="button" value="搜索" />
                        <input type="button" value="重置" />
                        <a href="#" @click="addCourse">增加课程</a>
                    </div>
                </form>
                <!-- 主体搜索及增加框 -->
                <div class='main-right-content'>
                    <!-- 以下容器均可修改，原有id和class别动，否则样式会变 -->

                    <table class="providerTable" cellpadding="1" cellspacing="1">
                        <tr class="firstTr">
                            <th width="5%">序号</th>
                            <th width="15%">课程封面</th>
                            <th width="15%">课程名称</th>
                            <th width="20%">课程分类</th>
                            <th width="10%">价格</th>
                            <th width="10%">上下架</th>
                            <th width="10%">操作</th>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td><img class="coursePic" src="img/course/course (1).jpg" /></td>
                            <td>今天你吃了吗</td>
                            <td>美食课程>易老师课程</td>
                            <td>1024元</td>
                            <td>下架</td>
                            <td>
                                <a href="#" @click="addCourse"><img src="img/read.png" alt="查看" title="查看" /></a>
                                <a href="#" @click="addCourse"><img src="img/xiugai.png" alt="修改" title="修改" /></a>
                                <a href="#" @click="addCourse"><img src="img/schu.png" alt="删除" title="删除" /></a>
                            </td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td><img class="coursePic" src="img/course/course (2).jpg" /></td>
                            <td>邯郸市五得利面粉厂</td>
                            <td>音乐课程>朱老师课程</td>
                            <td>5656元</td>
                            <td>上架</td>
                            <td>
                                <a href="#" @click="addCourse"><img src="img/read.png" alt="查看" title="查看" /></a>
                                <a href="#" @click="addCourse"><img src="img/xiugai.png" alt="修改" title="修改" /></a>
                                <a href="#" @click="addCourse"><img src="img/schu.png" alt="删除" title="删除" /></a>
                            </td>
                        </tr>
                    </table>

                </div>
                <footer>
                    打牛蛙组教育集团
                </footer>
            </div>

    </div>


    <!-- 模态框内容可修改，最外层盒子别动，否则样式会变 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">模态框标题</h4>
                </div>
                <div class="modal-body">
                    <div class="tableList">
                        <form action="#">
                            <div class="">
                                <label for="">姓名：</label>
                                <input type="text" />
                                <span>*请输入姓名哦~</span>
                            </div>
                            <div class="">
                                <label for="">年龄：</label>
                                <input type="text" />
                                <span>*请输入年龄哦~</span>
                            </div>
                            <div class="">
                                <label for="">姓名：</label>
                                <input type="text" />
                                <span>*请输入姓名哦~</span>
                            </div>
                            <div class="">
                                <label for="">年龄：</label>
                                <input type="text" />
                                <span>*请输入年龄哦~</span>
                            </div>
                            <div class="">
                                <label for="">姓名：</label>
                                <input type="text" />
                                <span>*请输入姓名哦~</span>
                            </div>
                            <div class="">
                                <label for="">年龄：</label>
                                <input type="text" />
                                <span>*请输入年龄哦~</span>
                            </div>
                            <div class="">
                                <label for="">姓名：</label>
                                <input type="text" />
                                <span>*请输入姓名哦~</span>
                            </div>
                            <div class="">
                                <label for="">年龄：</label>
                                <input type="text" />
                                <span>*请输入年龄哦~</span>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">确认</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
                </div>
            </div>
        </div>


        </section>

    </div>

    <!-- 每一页需加上slider，否则js动效无法显示 -->
    <script src="js/slider.js"></script>
    <!-- 每一页需加上slider，否则js动效无法显示 -->

    <script type="text/javascript">
        // 模态框触发
        new Vue({
            el: ".public-main-right",
            methods: {
                addCourse: function() {
                    $('#myModal').modal("show");
                }
            }
        });
    </script>
</body>

</html>